<!--  -->
<template>
  <div class="grammar-check">
    <div class="chose-course-top">
      <div class="header-left">
        <span class="back-arrow" @click="goQuit"></span>
      </div>
      <div class="course-title">
        复习
      </div>
      <div class="btn-group">
        <a-dropdown :trigger="['click']">
          <div class="head-translate-wrap">
            <img
              v-show="allTranslation === '1'"
              class="translate-btn"
              src="@/assets/reverse/translate-zh.png"
              alt=""
            />
            <img
              v-show="allTranslation === '2'"
              class="translate-btn"
              src="@/assets/reverse/translate-en.png"
              alt=""
            />
            <img
              v-show="allTranslation === '3'"
              class="translate-btn"
              src="@/assets/reverse/translate-all.png"
              alt=""
            />
          </div>
          <a-menu slot="overlay">
            <a-menu-item @click="selectTranslation('1')">中文</a-menu-item>
            <a-menu-item @click="selectTranslation('2')">英文</a-menu-item>
            <a-menu-item @click="selectTranslation('3')">中英文</a-menu-item>
          </a-menu>
        </a-dropdown>

        <div v-if="checkKey === '1'" class="check-btns">
          <div class="check-num">
            <div class="true-num">
              <img src="@/assets/reverse/success-icon.png" alt="" />
              <span>{{ checkedTrueNum }} 句</span>
            </div>
            <div class="false-num">
              <img src="@/assets/reverse/error-icon.png" alt="" />
              <span>{{ checkedFalseNum }} 句</span>
            </div>
          </div>
          <a-button
            class="check-submit"
            type="primary"
            shape="round"
            @click="goCheck"
            >提交</a-button
          >
        </div>
      </div>
    </div>
    <div class="list-wrap" v-if="proofreadList.length">
      <div class="proofread-list-wrap">
        <template>
          <proofreadItem
            v-for="item in proofreadList"
            :allType="allTranslation"
            :renderData="item"
            :key="item.id"
            :isCheck="checkMode"
            @checkStatus="totalChecked"
          ></proofreadItem>
          <div class="list-colum-width"></div>
          <div class="list-colum-width"></div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import proofreadItem from "./proofreadItem";
import { Dropdown, Menu } from "ant-design-vue";
export default {
  name: "grammar-review",
  components: {
    proofreadItem,
    ADropdown: Dropdown,
    AMenu: Menu,
    AMenuItem: Menu.Item,
  },
  data() {
    return {
      checkKey: "1",
      proofreadList: [],
      startCheckVisible: false,
      allTranslation: "1",
      checkedTrueNum: 0,
      checkedFalseNum: 0,
      checkMode: true,
    };
  },
  computed: {},
  watch: {},
  methods: {
    changeTab(key) {
      this.checkKey = key;
    },
    fetchProofread() {
      const res = {
        "status": "success",
        "code": 1,
        "data": {
          "list": [{
            "id": 1638,
            "title": "She did not understand me before I explained to her.",
            "translation": "在我向她解释之前，她没有听懂我的话。",
            "voice": "https:\/\/777-video.oss-cn-beijing.aliyuncs.com\/grammar\/US\/voice\/324c5c83d62a541dd4471e0f9918e3fda28d0f34c8fa9c41d3303e0c0c846cdc.wav",
            "keys_words": "before"
          }, {
            "id": 1639,
            "title": "Although he has a lot of money, he is still unhappy.",
            "translation": "虽然他有很多钱，但他仍然不快乐。",
            "voice": "https:\/\/777-video.oss-cn-beijing.aliyuncs.com\/grammar\/US\/voice\/746b4dc1236d09b43f729f6bce8bc40f080dd6c5604fd4feecad9dcbb0735422.wav",
            "keys_words": "Although"
          }, {
            "id": 1641,
            "title": "Wherever you go, I'll be right here waiting for you.",
            "translation": "无论你到哪里，我都会在这里等你。",
            "voice": "https:\/\/777-video.oss-cn-beijing.aliyuncs.com\/grammar\/US\/voice\/615f2eaee6ee44870274a106835d7f20c455ac7fbfd5153423bb018a99492853.wav",
            "keys_words": "Wherever"
          }]
        },
        "info": "操作成功"
      }
      this.proofreadList = res.data.list
      // fetchManual(this.$route.query).then((res) => {
      //   if (res.code === SUCCESS_CODE) {
      //     this.proofreadList = res.data.list;
      //   }
      // });
    },
    subProofread(sen_id) {
      manualSub({
        ...this.$route.query,
        sen_id: sen_id.toString(),
      }).then((res) => {
        if (res.code === SUCCESS_CODE) {
          this.$message.success("提交成功");
          this.$router.push("/reverse");
        }
      });
    },
    goCheck() {
      this.checkCollection = this.checkCollection || {};
      if (Object.keys(this.checkCollection).length === 0) {
        this.$message.error("没有选择句子哦~");
        return false;
      }
      let key,
        sen_id = [],
        error_id = [];
      for (key in this.checkCollection) {
        if (this.checkCollection[key] === "1") {
          sen_id.push(key);
        } else if (this.checkCollection[key] === "2") {
          error_id.push(key);
        }
      }
      if (!sen_id.length) {
        this.$router.go(-1);
        return false;
      }
      this.subProofread(sen_id);
    },
    startCheck(code) {
      console.log(code);
      if (!code) {
        this.$message.error("请填写教学码");
      } else {
        this.startCheckVisible = false;
        this.checkMode = true;
      }
    },
    selectTranslation(type) {
      this.allTranslation = type;
    },
    totalChecked({ id, status }) {
      this.checkCollection = this.checkCollection || {};
      this.checkCollection[id] = status;
      this.checkedTrueNum = Object.values(this.checkCollection).filter(
        (v) => v === "1"
      ).length;
      this.checkedFalseNum = Object.values(this.checkCollection).filter(
        (v) => v === "2"
      ).length;
    },
    fetchEndTime() {
      fetchEndTime(_.omit(this.$route.query, "type"));
    },
    goQuit() {
      this.$router.push("/study/grammar?ref=homepage");
    },
  },
  created() {
    this.fetchProofread();
  },
  mounted() {},
  beforeDestroy() {
    document.getElementById("reverse-audio").pause();
  },
  beforeRouteLeave(to, from, next) {
    // ...
    // this.fetchEndTime();
    next();
  },
};
</script>
<style  scoped>
@import url("index.css");
</style>
